<template>
  <cl-drawer ref="drawer" :props="{
    title: `${type == 'add' ? '新增' : '编辑'}分成方式`,
    size: '80%',
    appendToBody: true
  }" showConfirm confirmText="提交" @close="close" @confirm="submit" :saving="saving">
    <el-form :model="formData" ref="form" label-width="100px" label-position="top" class="demo-form">
      <el-form-item label="门店" prop="dept_id" :rules="[{ required: true, message: '请选择门店' }]">
        <cl-shop-select :disabled="type == 'edit'" v-model="formData.dept_id" clearable filterable :biz_id="biz_id"
          style="width: 100%" />
      </el-form-item>
      <el-form-item label="分成名称" prop="name" :rules="[{ required: true, message: '请输入分成名称' }]">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
      <!-- <el-form-item label="分配方案"> -->
      <span class="tip_title">分配方案</span>
      <FormTable :modelValue="formData.content" :addTemplate="addTemplate">
        <el-table-column label="固定金额" prop="amount">
          <template #default="{ row, $index }">
            <el-form-item :prop="`content.${$index}.amount`"
              :rules="[{ required: true, message: '请输入固定金额', trigger: 'blur' }]">
              <el-input v-model="row.amount"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="基数" prop="base">
          <template #default="{ row, $index }">
            <el-form-item :prop="`content.${$index}.base`"
              :rules="[{ required: true, message: '请选择基数', trigger: 'blur' }]">
              <cl-select v-model="row.base" placeholder="请选择基数" style="width: 100%">
                <el-option label="订单金额" value="1" />
                <el-option label="余额" value="2" />
              </cl-select>

            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="分配方" prop="side">
          <template #default="{ row, $index }">
            <el-form-item :prop="`content.${$index}.side`"
              :rules="[{ required: true, message: '请选择分配方', trigger: 'blur' }]">
              <cl-select v-model="row.side" placeholder="分配方" style="width: 100%">
                <el-option label="我方" :value="1" />
                <el-option label="院方" :value="2" />
                <el-option label="第三方" :value="3" />
              </cl-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="比例(‰)" prop="ratio">
          <template #default="{ row, $index }">
            <el-form-item :prop="`content.${$index}.ratio`" :rules="[{ required: true, message: '请输入比例', trigger: 'blur' }, {
              validator: validateNumber, trigger: 'blur'
            }]">
              <el-input v-model="row.ratio">
                <template slot="append">‰</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="说明" props="remark">
          <template #default="{ row, }">
            <el-form-item>
              <el-input v-model="row.remark"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </FormTable>
      <!-- </el-form-item> -->
    </el-form>

  </cl-drawer>
</template>

<script>
import FormTable from "@/components/formTable";
export default {
  components: {
    FormTable
  },
  data() {
    return {
      type: '',
      formData: {
        content: []
      },
      biz_id: '',
      saving: false,
      addTemplate: {
        base: null,
        side: '',
        ratio: '',
        amount: '',
        remark: ''
      },
    }
  },
  created() {
    this.biz_id = this.getCurrBiz();
  },
  mounted() {

  },
  methods: {
    open(type, data) {
      this.$refs.drawer.create(() => {
        this.type = type
        this.formData = { content: [] };
        this.$refs.form.resetFields();
        if (data) {
          this.formData = this.$TOOL.objCopy(data)
        }
      });
    },
    close() {
      this.formData = { content: [] };
      // this.$refs.drawer.closeDrawer()
      this.$refs.drawer.close();
    },
    validateNumber(r, v, cb) {
      if (Number.isNaN(Number(v))) {
        cb(new Error('请输入比例'));
      } else {
        cb();
      }
    },
    submit() {
      if (this.formData.content.length == 0) return this.$message.warning('请添加分配方案')
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.saving = true
          let params = this.$TOOL.objCopy(this.formData)
          console.log(params, 'params');

          try {
            if (this.type == "add") {
              await this.$service.reconciliation.addDeptAllocationPlan(params).then(res => {
                this.saving = false
              })
            } else {
              await this.$service.reconciliation.editDeptAllocationPlan(params).then(res => {
                this.saving = false
              })
            }
            console.log('跑到后面了');

            this.close()
            this.$emit("successed");
          } catch (error) {
            this.saving = false
          }
        }
      })
    }
  },
}
</script>
<style scoped lang='scss'>
.tip_title {
  font-weight: 700;
  display: block;
  padding: 20px 0 20px 0px;
  position: relative;

  &::before {
    position: absolute;
    left: -10px;
    content: '';
    width: 5px;
    height: 20px;
    background-color: #156DFF;
  }
}
</style>
